<template>
  <div>
    <h1>门票发布</h1>
    <el-row justify="center">
    <el-card style="width: 400px">
      <el-form ref="form" :model="formData" label-width="100px" :rules="rules">
        <el-form-item label="门票名称" prop="ticketName">
          <el-input v-model="formData.ticketName"></el-input>
        </el-form-item>
        <el-form-item label="门票描述" prop="ticketDescription">
          <el-input maxlength="150" show-word-limit type="textarea" v-model="formData.ticketDescription"></el-input>
        </el-form-item>
        <el-form-item label="开始日期" prop="scenicTicketStart">
          <el-date-picker
              value-format="x"
              v-model="formData.scenicTicketStart"
              type="datetime"
              placeholder="选择日期时间"/>
        </el-form-item>
        <el-form-item label="过期设置" prop="radio">
         <el-radio-group v-model="formData.radio">
           <el-radio :label="0">长期有效</el-radio>
           <el-radio :label="1">设置过期时间</el-radio>
         </el-radio-group>
          <el-date-picker
              value-format="x"
              :disabled-date="disabledDate"
              v-if="formData.radio===1"
              v-model="formData.expireTime"
              type="datetime"
              placeholder="选择日期时间"/>
        </el-form-item>
        <el-form-item label="门票价格" prop="price">
          <el-input maxlength="4" v-model="formData.price" size="small" style="width: 40px"/>.00￥
        </el-form-item>
        <el-form-item label="门票数量" prop="count">
          <el-input maxlength="6" size="small" style="width: 40px" v-model="formData.count"/>&nbsp;张
        </el-form-item>
      </el-form>
      <el-button :loading="loading"  @click="submit" type="primary" >发布</el-button><!--size="small"-->
    </el-card>
    </el-row>
  </div>
</template>

<script>
import {addTicket} from "@/api/ticket";

export default {
  name: "publishTicket",
  data(){
    return{
      disabledDate(time) {
        return time.getTime()<=Date.now()+3600 * 1000 * 24*2
      },
      loading:false,
      formData:{
        scenicTicketStart:'',
        ticketName:'',
        ticketDescription:'',
        radio:0,
        price:'',
        count:'',
        expireTime:'',
      },
      rules: {
        ticketName: [{required:true,message:'输入不能为空',trigger:['blur']}],
        ticketDescription: [{required:true,message:'输入不能为空',trigger:['blur']}],
        price: [
          {validator: (rule, value, callback) => {
              if (/^\d{1,3}$/.test(value)){
                callback()
              } else {
                callback(new Error('只能输入数字，且最多只能输入3位数'))
              }
            }, trigger: ['change','blur']}],
        count: [{validator: (rule, value, callback) => {
            if (/^\d{1,6}$/.test(value)){
              callback()
            } else {
              callback(new Error('只能输入数字，且最多只能输入6位数'))
            }
          }, trigger: ['change','blur']}]
      }
    }
  },
  methods:{
    submit(){
      this.loading=true
      const form={
        scenicTicketName:this.formData.ticketName,
        scenicTicketDescription: this.formData.ticketDescription,
        scenicTicketPrice: this.formData.price,
        scenicTicketNumber: this.formData.count,
        scenicTicketExpire:this.formData.expireTime,
        scenicTicketStart:this.formData.scenicTicketStart
      }
      addTicket(form).then(()=>{
        this.loading=false
      }).catch(()=>{
        this.loading=false
      })
    }
  }
}
</script>

<style scoped>

</style>
